<template>
  <div class="content">
    <img src="../assets/imgs/icon_01_bj.png" alt="" class="content-bg">
    <div class="header">
      <div class="left"></div>
      <div class="title">
        <div>
          鹅产业数智化平台
        </div>
        <img src="../assets/imgs/icon_01_ffj.png" alt="">
      </div>
      <div class="right"></div>
    </div>
    <div class="container">
      <div class="left">

        <!-- 全国存栏量 -->
        <div class="allBreeding">
          <div class="breed-title">
            全国存栏量(万只)
          </div>
          <div class="breed-content">
            <div>
              <div class="breed-content-nums">
                <div class="text">十亿</div>
                <div class="breed-content-num">
                  {{
                    numArray[0]
                  }}
                </div>
              </div>
              <div class="breed-content-nums">
                <div class="text">亿</div>
                <div class="breed-content-num">
                  {{
                    numArray[1]
                  }}
                </div>
              </div>
              <div class="breed-content-nums qw">
                <div class="text">千万</div>
                <div class="breed-content-num">
                  {{
                    numArray[2]
                  }}
                </div>
              </div>
              <div class="breed-content-nums">
                <div class="text">百万</div>
                <div class="breed-content-num">
                  {{
                    numArray[3]
                  }}
                </div>
              </div>
              <div class="breed-content-nums">
                <div class="text">十万</div>
                <div class="breed-content-num">
                  {{
                    numArray[4]
                  }}
                </div>
              </div>
              <div class="breed-content-nums">
                <div class="text">万</div>
                <div class="breed-content-num">
                  {{
                    numArray[5]
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="info">
          <farmInfo></farmInfo>
        </div>
        <div class="market">
          <market></market>
        </div>
        <div class="raw">
          <raw></raw>
        </div>

      </div>
      <div class="center">

        <div class="monitoring">
          <monitoring></monitoring>
        </div>
        <div class="bottom">
          <div class="dynamic">
            <dynamic></dynamic>
          </div>
          <div class="inventory">
            <inventory></inventory>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="production">
          <production></production>
        </div>
        <weather></weather>
        <div class="environment">
          <environment></environment>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>

import farmInfo from './farmInfo.vue'
import market from './market.vue';
import raw from './raw.vue';
import weather from './weather.vue';
import monitoring from './monitoring.vue';
import inventory from './inventory.vue';
import dynamic from './dynamic.vue';
import production from './production.vue';
import environment from './environment.vue';


import { getAllInfo } from '@/apis/allinfo/allinfo'
import { inject, provide } from 'vue';
import { ref } from 'vue';

// 全国存栏量(万只)
const breedNum = ref("000000")
const numArray = ref("000000")

let echarts = inject("echarts")

provide("$echarts", echarts)

const fetchAllInfo = async () => {
  const res = await getAllInfo()
  // console.log(res.data.data)
  const ary = res.data.data
  ary.forEach((item, index) => {
    if (item.configSign == "total-stocks") {
      breedNum.value = item.configValue
      numArray.value = breedNum.value.toString().split('').map(Number)
    }
  });

}

fetchAllInfo()


</script>

<style lang="less" scoped>
.content {
  height: 100vh;

  .content-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 24rem;
    height: 13.5rem;
    z-index: -1;
  }

  .header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 1.25rem;
    padding: 0 .625rem;
  }

  .title {
    position: relative;
    width: 9.2625rem;
    height: 1.0625rem;
  }

  .title div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-size: .4375rem;
    color: #00ffff;
    text-align: center;
    line-height: .875rem;
    z-index: 1;
  }

  .title img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  // 设置大容器样式
  .container {
    //最大最小宽度
    min-width: 1200px;
    max-width: 2048px;
    // height: 2048px;
    margin: 0 auto;
    padding: .125rem .25rem 0;
    // background-color: gray;

    display: flex;

    // 设置左右在页面的分数

    .left {
      flex: 3;
      // background-color: pink;

      .allBreeding {
        width: 100%;
        height: 1.75rem;
        // background-color: #fff;

        .breed-title {
          font-size: .1875rem;
          color: rgba(0, 255, 255, 1);
        }

        .breed-content {
          display: flex;
          justify-content: space-between;
          margin: .125rem auto 0;
          width: 80%;

          color: #fff;

          // height: 100%;
          // background-color: red;

          .breed-content-nums.qw {
            margin-right: .375rem;
          }

          .breed-content-nums {
            width: .625rem;
            height: 1.25rem;
            margin-right: .1rem;

            .text {
              font-size: .2rem;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            .breed-content-num {
              font-size: .75rem;
              text-align: center;
              line-height: 1.05rem;
              // display: flex;
              // justify-content: center;
              // align-items: center;
              background: url(../assets/imgs/icon_01_szbj.png) no-repeat;
              background-size: 100%;

              margin-top: .0625rem;
            }



          }

        }

        .breed-content>div {
          display: flex;
          margin-right: 15px;
        }

        .breed-content>div:last-child {
          margin-right: 0;
        }
      }
    }

    .right {
      flex: 3;
      // background-color: pink;
    }

    .center {
      flex: 6;
      // border: 1px solid blue;
      padding: 0.125rem;
      margin: .25rem;
    }
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 3.8375rem;
    // background-color: pink;
  }
}
</style>